<script setup lang="ts">
import { ref } from 'vue';
import { useAuthStore } from '@/stores/auth';
import { Form } from 'vee-validate';
import google from '@/assets/images/svgs/google-icon.svg';
import facebook from '@/assets/images/svgs/facebook-icon.svg';

const checkbox = ref(false);
const valid = ref(false);
const show1 = ref(false);
const password = ref('');
const email = ref('');
const passwordRules = ref([
    (v: string) => !!v || 'Password cannot be empty',
    (v: string) => (v && v.length >= 6) || 'Password length cannot be less than 6'
]);
const verifyCode = ref('');
const verifyCodeRules = ref([
    (v: string) => !!v || 'Verify code cannot be empty',
    (v: string) => (v && v.length >= 6) || 'Verify code length cannot be less than 6'
]);
const emailRules = ref([
    (v: string) => !!v || 'Email cannot be empty',
    (v: string) => /.+@.+\..+/.test(v) || 'Please enter a valid email address'
]);

function validate(values: any, { setErrors }: any) {
    const authStore = useAuthStore();
    let msg = authStore.login(email.value, password.value, verifyCode.value).catch((error) => setErrors({ apiError: error }));
    return msg;
}
</script>

<template>
    <v-row class="d-flex mb-3">
        <v-col cols="6" sm="6" class="pr-2">
            <v-btn variant="outlined" size="large"
                class="border text-subtitle-1 font-weight-semibold hover-link-primary" block>
                <img :src="facebook" width="20" class="mr-1" alt="facebook" />
                <span class="d-md-flex d-none mr-1">Sign in with</span> Facebook
            </v-btn>
        </v-col>
        <v-col cols="6" sm="6" class="pl-2">
            <v-btn variant="outlined" size="large"
                class="border text-subtitle-1 font-weight-semibold hover-link-primary" block>
                <img :src="google" height="16" class="mr-2" alt="google" />
                <span class="d-md-flex d-none mr-1">Sign in with</span> Google
            </v-btn>
        </v-col>
    </v-row>
    <div class="d-flex align-center text-center mb-6">
        <div class="text-h6 w-100 px-5 font-weight-regular auth-divider position-relative">
            <span class="bg-surface px-5 py-3 position-relative textSecondary">Or sign in with email</span>
        </div>
    </div>
    <Form @submit="validate" v-slot="{ errors, isSubmitting }" class="mt-5">
        <v-label class="font-weight-semibold pb-2">Email</v-label>
        <VTextField v-model="email" :rules="emailRules" class="mb-8" required hide-details="auto"></VTextField>



        <div class="d-flex justify-space-between align-center ">
            <div style="flex: 1;" class="mr-4">
                <div class="d-flex justify-space-between align-center ">
                    <v-label class="font-weight-semibold">Password</v-label>
                    <RouterLink to="/auth/forgot-password2"
                        class="text-primary text-decoration-none font-weight-medium">Forgot Password?</RouterLink>
                </div>


                <VTextField v-model="password" :rules="passwordRules" required hide-details="auto" type="password"
                    class="pwdInput "></VTextField>

            </div>
            <div v-if="errors.apiError == 'Error: Device verification required (code sent to email)' || errors.apiError == 'Error: Email verification code error'"
                style="flex: 1;">
                <div class="d-flex justify-space-between align-center ">
                    <v-label class="font-weight-semibold">Verify Code</v-label>
                </div>
                <!-- 6位数的验证码输入框  -->

                <VTextField v-model="verifyCode" :rules="verifyCodeRules" required hide-details="auto" type="number"
                    class="pwdInput "></VTextField>
            </div>
        </div>


        <div class="d-flex flex-wrap align-center my-3 ml-n2">
            <v-checkbox class="pe-2" v-model="checkbox" :rules="[(v: any) => !!v || 'Please agree to continue!']"
                required hide-details color="primary">
                <template v-slot:label class="font-weight-medium">Remember me</template>
            </v-checkbox>
        </div>

        <v-btn size="large" :loading="isSubmitting" color="primary" :disabled="valid" block type="submit"
            flat>Login</v-btn>
        <div v-if="errors.apiError" class="mt-2">
            <v-alert color="error">{{ errors.apiError }}</v-alert>
        </div>
    </Form>
</template>
